import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import AvatarView from '../../AvatarView'
import { Link } from 'react-router-dom'
import { LikeOutLineBtn } from '../../Button/LikeBtn'
import { CollectOutLineBtn } from '../../Button/CollectBtn'
import { useRecoilState } from 'recoil'
import { ImgTabsMock } from './mock'
import { ImgDownloadBtn } from '../../Button/DowlLoadBtn'
import { UserService } from '../../../transfer/service/UserService'

interface IImgTabsProps {
    data: any
}

export default function ImgTabs(props: IImgTabsProps) {
    const [user, setUser] = useRecoilState(ImgTabsMock)

    useEffect(() => {
        new UserService().getProfile(props.data.userId).then(res => {
            setUser(res.data.data)
        })
    }, [])

    return (
        <div className={style.container}>
            <div className={style.user}>
                <AvatarView width={'32px'} height={'32px'} img={'http://localhost:3000/' + user.profile.avatar} />
                <div className={style.name}>
                    <span>{user.profile.nickName}</span>
                    {JSON.parse(localStorage.getItem('account') as any).id == user.id ? (
                        <Link to={'/profile/photos/' + user.id}>@{user.username}</Link>
                    ) : (
                        <Link to={'/user/photos/' + user.id}>@{user.username}</Link>
                    )}
                </div>
            </div>
            <div className={style.btn}>
                <LikeOutLineBtn width={'39px'} height={'32px'} imgId={props.data.id} />
                {/*<CollectOutLineBtn data={props.data} width={'39px'} height={'32px'} imgId={props.data.imgId} />*/}
                <ImgDownloadBtn imgId={props.data.id} />
            </div>
        </div>
    )
}
